रिएक्ट एररबाउंड्री: एरर आइसोलेशन और रिकवरी रणनीतियाँ

फ्रंट-एंड डेवलपमेंट की गतिशील दुनिया में, विशेष रूप से जब रिएक्ट जैसे जटिल कंपोनेंट-आधारित फ्रेमवर्क के साथ काम करते हैं, तो अप्रत्याशित त्रुटियां अपरिहार्य हैं। यदि इन त्रुटियों को सही तरीके से नियंत्रित नहीं किया जाता है, तो वे एप्लिकेशन क्रैश और निराशाजनक उपयोगकर्ता अनुभव का कारण बन सकती हैं। रिएक्ट का ErrorBoundary कंपोनेंट इन त्रुटियों को शालीनता से संभालने, उन्हें अलग करने और रिकवरी रणनीतियाँ प्रदान करने के लिए एक मजबूत समाधान प्रदान करता है। यह व्यापक मार्गदर्शिका ErrorBoundary की शक्ति की पड़ताल करती है, यह दर्शाती है कि वैश्विक दर्शकों के लिए अधिक लचीला और उपयोगकर्ता-अनुकूल रिएक्ट एप्लिकेशन बनाने के लिए इसे प्रभावी ढंग से कैसे लागू किया जाए।

एरर बाउंड्री की आवश्यकता को समझना

कार्यान्वयन में गोता लगाने से पहले, आइए समझते हैं कि एरर बाउंड्री क्यों आवश्यक हैं। रिएक्ट में, रेंडरिंग के दौरान, लाइफसाइकिल मेथड्स में, या चाइल्ड कंपोनेंट्स के कंस्ट्रक्टर में होने वाली त्रुटियां पूरे एप्लिकेशन को क्रैश कर सकती हैं। ऐसा इसलिए है क्योंकि अनकैप्ड त्रुटियां कंपोनेंट ट्री में ऊपर की ओर फैलती हैं, जिससे अक्सर एक खाली स्क्रीन या एक अनुपयोगी त्रुटि संदेश दिखाई देता है। कल्पना कीजिए कि जापान में एक उपयोगकर्ता एक महत्वपूर्ण वित्तीय लेनदेन पूरा करने की कोशिश कर रहा है, केवल एक असंबंधित प्रतीत होने वाले कंपोनेंट में एक छोटी सी त्रुटि के कारण एक खाली स्क्रीन का सामना करना पड़ता है। यह सक्रिय त्रुटि प्रबंधन की महत्वपूर्ण आवश्यकता को दर्शाता है।

एरर बाउंड्री अपने चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ने, उन त्रुटियों को लॉग करने और कंपोनेंट ट्री को क्रैश करने के बजाय एक फॉलबैक यूआई प्रदर्शित करने का एक तरीका प्रदान करती हैं। वे आपको दोषपूर्ण कंपोनेंट्स को अलग करने और आपके एप्लिकेशन के एक हिस्से में त्रुटियों को दूसरों को प्रभावित करने से रोकने की अनुमति देते हैं, जिससे विश्व स्तर पर एक अधिक स्थिर और विश्वसनीय उपयोगकर्ता अनुभव सुनिश्चित होता है।

रिएक्ट एररबाउंड्री क्या है?

एक ErrorBoundary एक रिएक्ट कंपोनेंट है जो अपने चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ता है, उन त्रुटियों को लॉग करता है, और एक फॉलबैक यूआई प्रदर्शित करता है। यह एक क्लास कंपोनेंट है जो निम्नलिखित में से एक या दोनों लाइफसाइकिल मेथड्स को लागू करता है:

• static getDerivedStateFromError(error): यह लाइफसाइकिल मेथड एक डिसेंडेंट कंपोनेंट द्वारा त्रुटि फेंके जाने के बाद लागू होता है। यह उस त्रुटि को एक आर्ग्यूमेंट के रूप में प्राप्त करता है जो फेंकी गई थी और कंपोनेंट की स्थिति को अपडेट करने के लिए एक मान लौटाना चाहिए।
• componentDidCatch(error, info): यह लाइफसाइकिल मेथड एक डिसेंडेंट कंपोनेंट द्वारा त्रुटि फेंके जाने के बाद लागू होता है। यह दो आर्ग्यूमेंट्स प्राप्त करता है: फेंकी गई त्रुटि और एक जानकारी ऑब्जेक्ट जिसमें यह जानकारी होती है कि किस कंपोनेंट ने त्रुटि फेंकी है। आप इस मेथड का उपयोग त्रुटि जानकारी लॉग करने या अन्य साइड इफेक्ट्स करने के लिए कर सकते हैं।

एक बेसिक एररबाउंड्री कंपोनेंट बनाना

आइए मूलभूत सिद्धांतों को स्पष्ट करने के लिए एक बेसिक ErrorBoundary कंपोनेंट बनाएं।

कोड उदाहरण

यहां एक साधारण ErrorBoundary कंपोनेंट के लिए कोड है:

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 error: null,
 errorInfo: null,
 };
 }

 static getDerivedStateFromError(error) {
 // अगली रेंडर में फॉलबैक यूआई दिखाने के लिए स्टेट अपडेट करें।
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // उदाहरण "componentStack":
 // in ComponentThatThrows (created by App)
 // in App
 console.error("एक त्रुटि पकड़ी गई:", error);
 console.error("त्रुटि की जानकारी:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // आप त्रुटि को एक एरर रिपोर्टिंग सर्विस में भी लॉग कर सकते हैं
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // आप कोई भी कस्टम फॉलबैक यूआई रेंडर कर सकते हैं
 return (
 

 
कुछ गलत हो गया।
 
त्रुटि: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

स्पष्टीकरण

• कंस्ट्रक्टर: कंस्ट्रक्टर कंपोनेंट की स्टेट को hasError को false पर सेट करके इनिशियलाइज़ करता है। हम डिबगिंग उद्देश्यों के लिए एरर और एररइन्फो को भी स्टोर करते हैं।
• getDerivedStateFromError(error): यह स्टैटिक मेथड तब लागू होता है जब किसी चाइल्ड कंपोनेंट द्वारा कोई त्रुटि फेंकी जाती है। यह यह इंगित करने के लिए स्टेट को अपडेट करता है कि एक त्रुटि हुई है।
• componentDidCatch(error, info): यह मेथड त्रुटि फेंके जाने के बाद लागू होता है। यह त्रुटि और कंपोनेंट स्टैक के बारे में जानकारी युक्त एक info ऑब्जेक्ट प्राप्त करता है। यहां, हम त्रुटि को कंसोल पर लॉग करते हैं (इसे अपने पसंदीदा लॉगिंग मैकेनिज्म, जैसे सेंट्री, बगस्नैग या एक कस्टम इन-हाउस समाधान से बदलें)। हम स्टेट में एरर और एररइन्फो भी सेट करते हैं।
• render(): रेंडर मेथड hasError स्टेट की जांच करता है। यदि यह true है, तो यह एक फॉलबैक यूआई रेंडर करता है; अन्यथा, यह कंपोनेंट के चिल्ड्रन को रेंडर करता है। फॉलबैक यूआई जानकारीपूर्ण और उपयोगकर्ता-अनुकूल होना चाहिए। सुरक्षा कारणों से प्रोडक्शन एनवायरनमेंट में त्रुटि विवरण और कंपोनेंट स्टैक को शामिल करना, हालांकि डेवलपर्स के लिए सहायक है, को सशर्त रूप से रेंडर या हटा दिया जाना चाहिए।

एररबाउंड्री कंपोनेंट का उपयोग करना

ErrorBoundary कंपोनेंट का उपयोग करने के लिए, बस किसी भी कंपोनेंट को जो त्रुटि फेंक सकता है, उसके भीतर लपेटें।

कोड उदाहरण

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* ऐसे कंपोनेंट्स जो त्रुटि फेंक सकते हैं */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

स्पष्टीकरण

इस उदाहरण में, MyComponent को ErrorBoundary के साथ लपेटा गया है। यदि MyComponent या उसके बच्चों के भीतर कोई त्रुटि होती है, तो ErrorBoundary इसे पकड़ लेगा और फॉलबैक यूआई को रेंडर करेगा।

उन्नत एररबाउंड्री रणनीतियाँ

जबकि बेसिक ErrorBoundary त्रुटि प्रबंधन का एक मौलिक स्तर प्रदान करता है, आप अपने त्रुटि प्रबंधन को बढ़ाने के लिए कई उन्नत रणनीतियों को लागू कर सकते हैं।

1. ग्रेन्युलर एरर बाउंड्री

पूरे एप्लिकेशन को एक ही ErrorBoundary के साथ लपेटने के बजाय, ग्रेन्युलर एरर बाउंड्री का उपयोग करने पर विचार करें। इसमें आपके एप्लिकेशन के विशिष्ट भागों के आसपास ErrorBoundary कंपोनेंट लगाना शामिल है जो त्रुटियों के प्रति अधिक प्रवण हैं या जहां विफलता का सीमित प्रभाव होगा। उदाहरण के लिए, आप व्यक्तिगत विजेट या कंपोनेंट लपेट सकते हैं जो बाहरी डेटा स्रोतों पर निर्भर करते हैं।

उदाहरण

function ProductList() {
 return (
 

 {/* उत्पादों की सूची */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* सिफारिश इंजन */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

इस उदाहरण में, RecommendationWidget का अपना ErrorBoundary है। यदि सिफारिश इंजन विफल हो जाता है, तो यह ProductList को प्रभावित नहीं करेगा, और उपयोगकर्ता अभी भी उत्पादों को ब्राउज़ कर सकता है। यह ग्रेन्युलर दृष्टिकोण त्रुटियों को अलग करके और उन्हें एप्लिकेशन में फैलने से रोककर समग्र उपयोगकर्ता अनुभव में सुधार करता है।

2. एरर लॉगिंग और रिपोर्टिंग

त्रुटियों को लॉग करना डिबगिंग और आवर्ती समस्याओं की पहचान के लिए महत्वपूर्ण है। componentDidCatch लाइफसाइकिल मेथड सेंट्री, बगस्नैग, या रोलबार जैसी त्रुटि लॉगिंग सेवाओं के साथ एकीकृत करने के लिए आदर्श स्थान है। ये सेवाएं विस्तृत त्रुटि रिपोर्ट प्रदान करती हैं, जिसमें स्टैक ट्रेस, उपयोगकर्ता संदर्भ और पर्यावरण जानकारी शामिल है, जो आपको समस्याओं का शीघ्र निदान और समाधान करने में सक्षम बनाती हैं। जीडीपीआर जैसे गोपनीयता नियमों का अनुपालन सुनिश्चित करने के लिए त्रुटि लॉग भेजने से पहले संवेदनशील उपयोगकर्ता डेटा को अज्ञात या संशोधित करने पर विचार करें।

उदाहरण

import * as Sentry from "@sentry/react";

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 };
 }

 static getDerivedStateFromError(error) {
 // अगली रेंडर में फॉलबैक यूआई दिखाने के लिए स्टेट अपडेट करें।
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // सेंट्री में त्रुटि लॉग करें
 Sentry.captureException(error, { extra: info });
 // आप त्रुटि को एक एरर रिपोर्टिंग सर्विस में भी लॉग कर सकते हैं
 console.error("एक त्रुटि पकड़ी गई:", error);
 }

 render() {
 if (this.state.hasError) {
 // आप कोई भी कस्टम फॉलबैक यूआई रेंडर कर सकते हैं
 return (
 

 
कुछ गलत हो गया।
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

इस उदाहरण में, componentDidCatch मेथड सेंट्री को त्रुटि की रिपोर्ट करने के लिए Sentry.captureException का उपयोग करता है। आप अपनी टीम को सूचनाएं भेजने के लिए सेंट्री को कॉन्फ़िगर कर सकते हैं, जिससे आप महत्वपूर्ण त्रुटियों पर तुरंत प्रतिक्रिया कर सकते हैं।

3. कस्टम फॉलबैक यूआई

ErrorBoundary द्वारा प्रदर्शित फॉलबैक यूआई त्रुटियां होने पर भी एक उपयोगकर्ता-अनुकूल अनुभव प्रदान करने का एक अवसर है। एक सामान्य त्रुटि संदेश दिखाने के बजाय, एक अधिक जानकारीपूर्ण संदेश प्रदर्शित करने पर विचार करें जो उपयोगकर्ता को समाधान की ओर मार्गदर्शन करता है। इसमें पृष्ठ को रीफ्रेश करने, समर्थन से संपर्क करने, या बाद में फिर से प्रयास करने के निर्देश शामिल हो सकते हैं। आप हुई त्रुटि के प्रकार के आधार पर फॉलबैक यूआई को भी अनुकूलित कर सकते हैं।

उदाहरण

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 error: null,
 };
 }

 static getDerivedStateFromError(error) {
 // अगली रेंडर में फॉलबैक यूआई दिखाने के लिए स्टेट अपडेट करें।
 return {
 hasError: true,
 error: error,
 };
 }

 componentDidCatch(error, info) {
 console.error("एक त्रुटि पकड़ी गई:", error);
 // आप त्रुटि को एक एरर रिपोर्टिंग सर्विस में भी लॉग कर सकते हैं
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // आप कोई भी कस्टम फॉलबैक यूआई रेंडर कर सकते हैं
 if (this.state.error instanceof NetworkError) {
 return (
 

 
नेटवर्क त्रुटि
 
कृपया अपना इंटरनेट कनेक्शन जांचें और पुनः प्रयास करें।
 
 );
 } else {
 return (
 

 
कुछ गलत हो गया।
 
कृपया पृष्ठ को रीफ्रेश करने का प्रयास करें या समर्थन से संपर्क करें।
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

इस उदाहरण में, फॉलबैक यूआई जांचता है कि क्या त्रुटि एक NetworkError है। यदि है, तो यह उपयोगकर्ता को अपना इंटरनेट कनेक्शन जांचने का निर्देश देने वाला एक विशिष्ट संदेश प्रदर्शित करता है। अन्यथा, यह एक सामान्य त्रुटि संदेश प्रदर्शित करता है। विशिष्ट, कार्रवाई योग्य मार्गदर्शन प्रदान करना उपयोगकर्ता अनुभव को बहुत बेहतर बना सकता है।

4. पुनः प्रयास तंत्र (Retry Mechanisms)

कुछ मामलों में, त्रुटियां क्षणिक होती हैं और ऑपरेशन को पुनः प्रयास करके हल की जा सकती हैं। आप ErrorBoundary के भीतर एक पुनः प्रयास तंत्र लागू कर सकते हैं ताकि एक निश्चित देरी के बाद विफल ऑपरेशन को स्वचालित रूप से पुनः प्रयास किया जा सके। यह नेटवर्क त्रुटियों या अस्थायी सर्वर आउटेज को संभालने के लिए विशेष रूप से उपयोगी हो सकता है। ऐसे ऑपरेशनों के लिए पुनः प्रयास तंत्र लागू करने में सतर्क रहें जिनके साइड इफेक्ट्स हो सकते हैं, क्योंकि उन्हें पुनः प्रयास करने से अनपेक्षित परिणाम हो सकते हैं।

उदाहरण

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // एक्सपोनेंशियल बैकऑफ
 console.log(`Retrying in ${retryDelay / 1000} seconds...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // अनमाउंट या री-रेंडर पर टाइमर की सफाई
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
डेटा लोड हो रहा है...
;
 }

 if (error) {
 return 
त्रुटि: {error.message} - {retryCount} बार पुनः प्रयास किया गया।
;
 }

 return 
डेटा: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

इस उदाहरण में, DataFetchingComponent एक एपीआई से डेटा लाने का प्रयास करता है। यदि कोई त्रुटि होती है, तो यह retryCount को बढ़ाता है और तेजी से बढ़ती देरी के बाद ऑपरेशन को पुनः प्रयास करता है। ErrorBoundary किसी भी अनहैंडल्ड अपवाद को पकड़ता है और एक त्रुटि संदेश प्रदर्शित करता है, जिसमें पुनः प्रयास की संख्या भी शामिल है।

5. एरर बाउंड्री और सर्वर-साइड रेंडरिंग (SSR)

सर्वर-साइड रेंडरिंग (SSR) का उपयोग करते समय, त्रुटि प्रबंधन और भी महत्वपूर्ण हो जाता है। सर्वर-साइड रेंडरिंग प्रक्रिया के दौरान होने वाली त्रुटियां पूरे सर्वर को क्रैश कर सकती हैं, जिससे डाउनटाइम और खराब उपयोगकर्ता अनुभव हो सकता है। आपको यह सुनिश्चित करने की आवश्यकता है कि आपकी एरर बाउंड्री सर्वर और क्लाइंट दोनों पर त्रुटियों को पकड़ने के लिए ठीक से कॉन्फ़िगर की गई हैं। अक्सर, Next.js और Remix जैसे SSR फ्रेमवर्क में अपने स्वयं के अंतर्निहित त्रुटि प्रबंधन तंत्र होते हैं जो रिएक्ट एरर बाउंड्री के पूरक होते हैं।

6. एरर बाउंड्री का परीक्षण

एरर बाउंड्री का परीक्षण यह सुनिश्चित करने के लिए आवश्यक है कि वे सही ढंग से काम करते हैं और अपेक्षित फॉलबैक यूआई प्रदान करते हैं। त्रुटि स्थितियों का अनुकरण करने और यह सत्यापित करने के लिए कि आपकी एरर बाउंड्री त्रुटियों को पकड़ती हैं और उपयुक्त फॉलबैक यूआई प्रस्तुत करती हैं, जेस्ट और रिएक्ट टेस्टिंग लाइब्रेरी जैसी परीक्षण लाइब्रेरीज का उपयोग करें। यह सुनिश्चित करने के लिए कि आपकी एरर बाउंड्री मजबूत हैं और विभिन्न परिदृश्यों को संभालती हैं, विभिन्न प्रकार की त्रुटियों और एज केस का परीक्षण करने पर विचार करें।

उदाहरण

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('यह कंपोनेंट एक त्रुटि फेंकता है');
 return 
यह रेंडर नहीं होना चाहिए
;
}

test('त्रुटि फेंके जाने पर फॉलबैक यूआई प्रस्तुत करता है', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/कुछ गलत हो गया/i);
 expect(errorMessage).toBeInTheDocument();
});

यह परीक्षण एक ऐसे कंपोनेंट को प्रस्तुत करता है जो ErrorBoundary के भीतर एक त्रुटि फेंकता है। फिर यह सत्यापित करता है कि फॉलबैक यूआई सही ढंग से प्रस्तुत किया गया है या नहीं, यह जांच कर कि क्या त्रुटि संदेश दस्तावेज़ में मौजूद है।

7. ग्रेसफुल डिग्रेडेशन

एरर बाउंड्री आपके रिएक्ट एप्लिकेशन में ग्रेसफुल डिग्रेडेशन को लागू करने का एक प्रमुख घटक हैं। ग्रेसफुल डिग्रेडेशन आपके एप्लिकेशन को इस तरह से डिजाइन करने की प्रथा है कि इसके कुछ हिस्से विफल होने पर भी यह कम कार्यक्षमता के साथ काम करना जारी रखे। एरर बाउंड्री आपको विफल कंपोनेंट्स को अलग करने और उन्हें एप्लिकेशन के बाकी हिस्सों को प्रभावित करने से रोकने की अनुमति देती हैं। एक फॉलबैक यूआई और वैकल्पिक कार्यक्षमता प्रदान करके, आप यह सुनिश्चित कर सकते हैं कि त्रुटियां होने पर भी उपयोगकर्ता आवश्यक सुविधाओं तक पहुंच सकते हैं।

बचने के लिए सामान्य गलतियाँ

जबकि ErrorBoundary एक शक्तिशाली उपकरण है, कुछ सामान्य गलतियों से बचना चाहिए:

• एसिंक्रोनस कोड को न लपेटना: ErrorBoundary केवल रेंडरिंग के दौरान, लाइफसाइकिल मेथड्स में, और कंस्ट्रक्टर में त्रुटियों को पकड़ता है। एसिंक्रोनस कोड (जैसे, setTimeout, Promises) में त्रुटियों को try...catch ब्लॉक का उपयोग करके पकड़ा जाना चाहिए और एसिंक्रोनस फ़ंक्शन के भीतर उचित रूप से संभाला जाना चाहिए।
• एरर बाउंड्री का अत्यधिक उपयोग: अपने एप्लिकेशन के बड़े हिस्से को एक ही ErrorBoundary में लपेटने से बचें। इससे त्रुटियों के स्रोत को अलग करना मुश्किल हो सकता है और एक सामान्य फॉलबैक यूआई बहुत बार प्रदर्शित हो सकता है। विशिष्ट कंपोनेंट्स या सुविधाओं को अलग करने के लिए ग्रेन्युलर एरर बाउंड्री का उपयोग करें।
• त्रुटि जानकारी को अनदेखा करना: केवल त्रुटियों को न पकड़ें और एक फॉलबैक यूआई प्रदर्शित करें। त्रुटि जानकारी (कंपोनेंट स्टैक सहित) को एक त्रुटि रिपोर्टिंग सेवा या अपने कंसोल पर लॉग करना सुनिश्चित करें। यह आपको अंतर्निहित मुद्दों का निदान और समाधान करने में मदद करेगा।
• प्रोडक्शन में संवेदनशील जानकारी प्रदर्शित करना: प्रोडक्शन एनवायरनमेंट में विस्तृत त्रुटि जानकारी (जैसे, स्टैक ट्रेस) प्रदर्शित करने से बचें। यह उपयोगकर्ताओं को संवेदनशील जानकारी उजागर कर सकता है और एक सुरक्षा जोखिम हो सकता है। इसके बजाय, एक उपयोगकर्ता-अनुकूल त्रुटि संदेश प्रदर्शित करें और विस्तृत जानकारी को एक त्रुटि रिपोर्टिंग सेवा में लॉग करें।

फंक्शनल कंपोनेंट्स और हुक्स के साथ एरर बाउंड्री

जबकि एरर बाउंड्री को क्लास कंपोनेंट्स के रूप में लागू किया जाता है, आप अभी भी हुक्स का उपयोग करने वाले फंक्शनल कंपोनेंट्स के भीतर त्रुटियों को संभालने के लिए उनका प्रभावी ढंग से उपयोग कर सकते हैं। सामान्य दृष्टिकोण में फंक्शनल कंपोनेंट को एक एररबाउंड्री कंपोनेंट के भीतर लपेटना शामिल है, जैसा कि पहले दिखाया गया है। त्रुटि प्रबंधन तर्क एररबाउंड्री के भीतर रहता है, प्रभावी रूप से उन त्रुटियों को अलग करता है जो फंक्शनल कंपोनेंट की रेंडरिंग या हुक्स के निष्पादन के दौरान हो सकती हैं।

विशेष रूप से, फंक्शनल कंपोनेंट की रेंडरिंग के दौरान या useEffect हुक के बॉडी के भीतर फेंकी गई कोई भी त्रुटि एररबाउंड्री द्वारा पकड़ी जाएगी। हालांकि, यह ध्यान रखना महत्वपूर्ण है कि एररबाउंड्री उन त्रुटियों को नहीं पकड़ती हैं जो फंक्शनल कंपोनेंट के भीतर DOM तत्वों से जुड़े इवेंट हैंडलर्स (जैसे, onClick, onChange) के भीतर होती हैं। इवेंट हैंडलर्स के लिए, आपको त्रुटि प्रबंधन के लिए पारंपरिक try...catch ब्लॉक का उपयोग करना जारी रखना चाहिए।

त्रुटि संदेशों का अंतर्राष्ट्रीयकरण और स्थानीयकरण

वैश्विक दर्शकों के लिए एप्लिकेशन विकसित करते समय, अपने त्रुटि संदेशों का अंतर्राष्ट्रीयकरण और स्थानीयकरण करना महत्वपूर्ण है। बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए एररबाउंड्री के फॉलबैक यूआई में प्रदर्शित त्रुटि संदेशों को उपयोगकर्ता की पसंदीदा भाषा में अनुवादित किया जाना चाहिए। आप अपने अनुवादों को प्रबंधित करने और उपयोगकर्ता के लोकेल के आधार पर उचित त्रुटि संदेश को गतिशील रूप से प्रदर्शित करने के लिए i18next या React Intl जैसी लाइब्रेरीज का उपयोग कर सकते हैं।

i18next का उपयोग करके उदाहरण

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    fr: {
      translation: {
        'error.generic': 'Une erreur est survenue. Veuillez réessayer plus tard.',
        'error.network': 'Erreur réseau. Veuillez vérifier votre connexion Internet.',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // Update state so the next render will show the fallback UI
    // return { hasError: true }; // यह हुक्स के साथ काम नहीं करता है
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // आप कोई भी कस्टम फॉलबैक यूआई रेंडर कर सकते हैं
    return ;
  }

  return children;
}

export default ErrorBoundary;

इस उदाहरण में, हम अंग्रेजी और फ्रेंच के लिए अनुवाद प्रबंधित करने के लिए i18next का उपयोग करते हैं। ErrorFallback कंपोनेंट वर्तमान भाषा के आधार पर उचित त्रुटि संदेश प्राप्त करने के लिए useTranslation हुक का उपयोग करता है। यह सुनिश्चित करता है कि उपयोगकर्ताओं को उनकी पसंदीदा भाषा में त्रुटि संदेश दिखाई दें, जिससे समग्र उपयोगकर्ता अनुभव में वृद्धि होती है।

निष्कर्ष

रिएक्ट ErrorBoundary कंपोनेंट मजबूत और उपयोगकर्ता-अनुकूल रिएक्ट एप्लिकेशन बनाने के लिए एक महत्वपूर्ण उपकरण हैं। एरर बाउंड्री को लागू करके, आप शालीनता से त्रुटियों को संभाल सकते हैं, एप्लिकेशन क्रैश को रोक सकते हैं, और दुनिया भर के उपयोगकर्ताओं के लिए एक बेहतर उपयोगकर्ता अनुभव प्रदान कर सकते हैं। एरर बाउंड्री के सिद्धांतों को समझकर, ग्रेन्युलर एरर बाउंड्री, एरर लॉगिंग और कस्टम फॉलबैक यूआई जैसी उन्नत रणनीतियों को लागू करके, और सामान्य गलतियों से बचकर, आप अधिक लचीला और विश्वसनीय रिएक्ट एप्लिकेशन बना सकते हैं जो वैश्विक दर्शकों की जरूरतों को पूरा करते हैं। वास्तव में समावेशी उपयोगकर्ता अनुभव प्रदान करने के लिए त्रुटि संदेश प्रदर्शित करते समय अंतर्राष्ट्रीयकरण और स्थानीयकरण पर विचार करना याद रखें। जैसे-जैसे वेब एप्लिकेशन की जटिलता बढ़ती जा रही है, उच्च-गुणवत्ता वाले सॉफ़्टवेयर बनाने वाले डेवलपर्स के लिए त्रुटि प्रबंधन तकनीकों में महारत हासिल करना तेजी से महत्वपूर्ण हो जाएगा।